import React, { useEffect, useState } from 'react';
import s from './style.module.css';
import { withRouter } from 'react-router';
import PropTypes from 'prop-types';
import Table from '@knownsec/react-component/dist/Table';
import Tabs, { TabPane } from '@kuiper-components/tabs';
import cn from 'classnames';
import {	webTaskCol } from '../columns';
import VulTable from './VulTable';
import SSLTable from './SSLTable';
import SecurityTable from './SecurityTable';
import ContentTable from './ContentTable';
import ChangeCheckTable from './ChangeCheckTable';
import fetchFer from 'API/fetch';
import Icon from '@knownsec/react-component/dist/Icon';
import Tooltip from '@knownsec/react-component/dist/Tooltip';
import { GetQueryString } from '../../../../../helpers/getUrlParams';
import {
	FREQUENCY_UNIT_MAP as UNIT,
	SSL_CATEGORY_KEY_LABEL_MAP,
	CONTENT_KEYWORD_TYPES,
	CONTENT_PRIVACY_DISCLOSURE_TYPES,
} from '../../../../../../common/constants';
import ms from 'ms';
import moment from 'moment';
import SequenceDialog from '../../../../../components/SequenceDialog';
import UrlDetailDialog from '../../../../../components/UrlDetailDialog';
const SECURITY_EVENT_TYPE_MAP = {
	black_links: '暗链',
	broken_links: '坏链',
	cryjack: '挖矿',
	malscan: '挂马',
	foreign_links_2: '风险外链(违规内容)',
	foreign_links_3: '风险外链(风险域名)',
	foreign_links_1: '风险外链(未备案)'
}
const taskTypeMap = {
	vul: 'Web漏洞监测',
	ssl: 'SSL安全监测',
	security_event: '安全事件监测',
	content: '内容违规监测',
  change_check:'篡改监测'
};
const statusMap = {
	http_waf_error: 'ScanV扫描节点疑似被目标主机防火墙拦截，建议将扫描IP加白再进行检测。',
	http_status_error: '平台探测到疑似网站状态异常，建议检查网站状态。',
	http_code_error: '平台探测到网站状态码异常，建议检查网站状态。',
	ping_error: '平台探测到疑似目标主机服务异常，建议检查服务状态。',
};
const timeList = ['天', '时', '分', '秒'];

const EyesTip = ({data, line})=>
	<Tooltip
		overlay={
			<div style={{overflow: 'auto',}}>
				{line ? data.map(item => (<p>{item}、</p>)):data}
			</div>
		}
		placement={'top'}
	>
		<Icon
			type={'detail'}
			className={cn(
				s.mainColor,
				s.cp,
				s.ml5,
				s.vam
			)}
		/>
	</Tooltip>

const formatChangeCheckConfig = (data) => {
	const listData = data || []
	const count = listData.length
	if (!count > 0) {
		return '- -';
	}
	if (count === 1) {
		return listData[0];
	}
	return (
		<span>
				{listData[0]}等{count}个<EyesTip data={listData} line={true}/>
		</span>
	)
}

function Detail({
	match: {
		params: { assetType },
	},
	location,
	jid,
	tid,
	atid,
	data,
	taskType,
	task_types,
	history,
	isHistory,
	webDataLoading,
	refresh
}) {
	const resD = JSON.parse(sessionStorage.getItem('resD') || null) || {}
	const is_support = resD?.balance?.wsTaskTime?.total && resD?.feature?.wsTaskTime
	const tag = GetQueryString(location.search, 'tag') || 'vul';
	const type = GetQueryString(location.search, 'type');
	const [vulnsMap, setVulnsMap] = React.useState({});
	const [vulnsList, setVulnsList] = React.useState([]);
	const [vulnsTemp, setVulnsTemp] = useState([])
	const getVulnsTemp = async (type) => {
		const res = await fetchFer(`api/v2/kb/get_all_profile_names`, {
			method: 'GET',
			checkStatus: 501,
		}).catch(err => {
			return err;
		});
		const map = res.data.reduce((t, item) => {
			if (item.custom_profile_template_id) {
				t[item.custom_profile_template_id] =  item.display_name.zh_cn
			} else {
				t[item.value.toString()] =  item.display_name.zh_cn
			}
			return t
		}, {});
		setVulnsTemp(map)
	};

	const getVulnsList = async () => {
		const res = await fetchFer(`/api/v2/vulndb/kb_vulns`, {
			method: 'GET',
			checkStatus: 501,
		}).catch(err => {
			return err;
		});
		const mapData = {};
		const data = res.data.map(item => {
			mapData[item.source_id] = item.name.zh_cn;
			return { label: item.name.zh_cn, value: item.source_id };
		});
		setVulnsMap(mapData);
		setVulnsList(data);
	};
	const taskContent = (data, map = {}, text, type) => {
		let res = '- -';
		const foreignLinksMap = {
			foreign_links_2: '违规内容',
			foreign_links_3: '风险域名',
			foreign_links_1: '未备案'
		}
		if (data?.length > 0) {
			const foreignText = []
			const allData = data?.reduce((t, item) => {
				if (foreignLinksMap[item]) {
					foreignText.push(foreignLinksMap[item])
					foreignText.length === 1 && t.push('风险外链');
				} else {
					t.push(map[item]);
				}
				return t
			}, [])
			if (allData.length > 2) {
				res = (
					<>
						{allData.slice(0, 2).join('、')}
						等{allData.length}{type === 'vul' ? '项' : '类'}
						<Tooltip
							overlay={
								<div
									style={{
										maxWidth: '300px',
										maxHeight: '200px',
										overflow: 'auto',
									}}
								>
									{allData?.filter(i => i !== '风险外链')?.concat(foreignText.length > 0 ? `风险外链(${foreignText.join('、')})` : '')?.filter(i => i)?.join('、')}
								</div>
							}
							placement={'top'}
						>
							<Icon
								type={'detail'}
								className={cn(s.mainColor, s.cp, s.ml5, s.vam)}
							/>
						</Tooltip>
					</>
				);
			} else {
				res = allData?.filter(i => i !== '风险外链')?.concat(foreignText.length > 0 ? `风险外链(${foreignText.join('、')})` : '')?.filter(i => i)?.join('、');
			}
		}
		return res;
	};

  // 一组字段格式化方法
  const scanIntervalFormat = value => {
    if(!value){
      return '- -'
    }

		let unit;
		let num;
		if (value) {
			const freq = ms(value);
			unit = value ? freq.replace(/\d*/, '') : 'd';
			num = parseInt(freq.replace(/[a-zA-Z]/, ''), 10);
			if (value % ms('30d') === 0) {
				unit = 'month';
				num = value / ms('30d');
			} else if (value % ms('1w') === 0) {
				unit = 'w';
				num = value / ms('1w');
			}
		}
		return `${num}${UNIT[unit]}1次`;
	};
  const resoureceFormat = resources =>{
    if(resources.length===0){
      return "- -"
    }
    return `${resources[0]}等${resources.length}个`
  }
  const keyWordsFormat = keywords =>{
    if(keywords.length===0){
      return "- -"
    }
    return `${keywords[0]}等${keywords.length}个`
  }
  const changeTypeFormat = changeTypes =>{
    if(changeTypes.length===0){
      return "- -"
    }
    const changeTypeMap = {
      "text":"文本",
      "structure":"结构",
      "resource":"资源",
    }
    return changeTypes.map(key=> changeTypeMap[key]).join('、 ') + "变更"
  }
  const taskTypeFormat = taskType=>{
    return taskType === 'schedule'
    ? '周期性任务'
    : '单次任务'
  }
  const scanDepthFormat = depth =>{
    return  depth ? depth + '层' : '- -'
  }
  const maxPageFormat = maxPage =>{
    return  maxPage ? maxPage + '页' : '- -'
  }

  // 监测任务信息表格
  const MonitorTaskList = () => {

    const generateColumns = () => {
      const col = JSON.parse(JSON.stringify(webTaskCol))
      if (col.length < 6) {
        col[col.length - 1].render = (e) => {
          return <div title={e} className='ell db'>{e}</div>
        }
        if (data?.overview?.is_display_url) {
          col.splice(4, 0,
            {
              title: '检测URL数',
              dataIndex: 'url_count',
              key: 'url_count',
              width: 80,
              render(e) {
                return isNaN(e) ? '- -' : e;
              },
            }
          )
        }
        col.push({
          title: '操作',
          dataIndex: 'target_status',
          key: 'target_status',
          width: 120,
          render(e, row) {
            return <>
              <SequenceDialog target_status={{
                http: { ...e?.httpGetSequence, target_status: e?.httpGetSequence ? e.status : '' },
                ping: { ...e?.detailPing, target_status: e?.detailPing ? e.status : '' },
              }}
                title={<span>
                  {/* <span className='main-color'></span> */}
                  {row.task_type.substring(0, row.task_type.length - 2)}网络快照
                </span>}
                subTitle=''
                url_count={row.url_count} statusText={statusMap[e?.status] ? e?.status : (e?.status === 'good' ? '正常' : '')} />
              {row?.task_type_key !== 'ssl' && data?.overview?.is_display_url && <UrlDetailDialog overview={row} id={row?.task_id} buttonText='URL详情' type='task' className={'ml10'} />}
            </>
          },
        })
      }
      return col
    }

    const monitorTaskData = Object.keys(taskTypeMap).reduce((t, i) => {
      if (data[i]) {
        const used_time = data[i]?.time_info?.used_time.reduce(
          (t, i, k) => {
            if (i > 0) {
              t += i + timeList[k];
            }
            return t;
          },
          ''
        ) || '- -';
        t.push({
          ...data[i],
          url_count: i === 'ssl' ? undefined : data[i]?.url_count,
          task_type: taskTypeMap[i],
          task_type_key: i,
          start_time: data[i].time_info ? moment(data[i].time_info?.start_time).format(
            'YYYY-MM-DD HH:mm:ss'
          ) : '- -',
          end_time: data[i].time_info ? moment(data[i].time_info?.end_time).format(
            'YYYY-MM-DD HH:mm:ss'
          ) : '- -',
          used_time,
          task_session_id: data[i].task_session_id || '- -',
        });
      }
      return t;
    }, [])

    return (<>
      <div className={cn(s.p20_0)}>监测任务信息</div>
      <Table
        key={Math.random().toString(36).slice(-6)}
        columns={generateColumns()}
        className={s.minHAuto}
        data={monitorTaskData}
        pro
      />
    </>)
  }

  const HistoryInfo = () => (<>
    {data?.vul && (
      <>
        <div className={cn(s.p20_0)}>Web漏洞监测参数</div>
        <div className={cn(s.p16_24, s.border)}>
          <div className={cn(s.df, s.aic)}>
            <span className={s.flex1}>
              任务类型：{taskTypeFormat(taskType)}
            </span>
            {taskType === 'schedule' && (
              <span className={s.flex1}>
                监测频率：{scanIntervalFormat(data?.vul?.settings?.interval)}
              </span>
            )}
            <span className={s.flex1}>
              监测内容：
              {(function () {
                const vul = data?.vul?.settings?.collect?.vul || [];
                if (vul.length === 0) {
                  return '- -';
                }
                if (taskType === 'schedule') {
                  return taskContent(vul, vulnsTemp, '所有漏洞类型', 'vul');
                } else {
                  if (vulnsTemp[vul[0]]) {
                    return taskContent(
                      vul,
                      vulnsTemp,
                      '所有漏洞类型',
                      'vul'
                    );
                  } else {
                    return taskContent(vul, vulnsMap, '所有漏洞插件');
                  }
                }
              })()}
            </span>
            <span className={s.flex1}>
              监测模式：
              {data?.vul?.settings?.collect?.speed === 'high'
                ? '仅高危'
                : '高、中、低危'}
            </span>
            {taskType !== 'schedule' &&
              data?.vul?.settings?.collect?.type !== 'increment' && (
                <span className={s.flex1}>
                  监测深度：{scanDepthFormat(data?.vul?.settings?.collect?.depth)}
                </span>
              )}
          </div>
          {data?.vul?.settings?.collect?.type !== 'increment' && (
            <div className={cn(s.df, s.aic, s.mt12)}>
              {taskType === 'schedule' && (
                <span className={s.flex1}>
                   监测深度：{scanDepthFormat(data?.vul?.settings?.collect?.depth)}
                </span>
              )}
              <span className={s.flex1}>
                监测最大URL数: {maxPageFormat(data?.vul?.settings?.collect?.maxPage)}
              </span>
              <span className={s.flex1}></span>
              {taskType === 'schedule' ? (
                <span className={s.flex1}></span>
              ) : (
                <>
                  <span className={s.flex1}></span>
                  <span className={s.flex1}></span>
                </>
              )}
            </div>
          )}
        </div>
      </>
    )}
    {data?.ssl && (
      <>
        <div className={cn(s.p20_0)}>SSL安全监测参数</div>
        <div className={cn(s.p16_24, s.border)}>
          <div className={cn(s.df, s.aic)}>
            <span className={s.flex1}>
              任务类型：{taskTypeFormat(taskType)}
            </span>
            <span className={s.flex1}>
              监测内容：
              {data?.ssl?.settings?.collect?.pluginCategories
                ?.map(item => {
                  return SSL_CATEGORY_KEY_LABEL_MAP[item];
                })
                .join(', ')}
            </span>
            {taskType === 'schedule' ? (
              <span className={s.flex1}>
                监测频率：{scanIntervalFormat(data?.ssl?.settings?.interval)}
              </span>
            ) : (
              <span className={s.flex1}></span>
            )}
            <span className={s.flex1}></span>
          </div>
        </div>
      </>
    )}
    {data?.security_event && (
      <>
        <div className={cn(s.p20_0)}>安全事件监测参数</div>
        <div className={cn(s.p16_24, s.border)}>
          <div className={cn(s.df, s.aic)}>
            <span className={s.flex1}>
              任务类型：{taskTypeFormat(taskType)}
            </span>
            {taskType === 'schedule' && (
              <span className={s.flex1}>
                监测频率：{scanIntervalFormat(data?.security_event?.settings?.interval)}
              </span>
            )}
            <span className={s.flex2}>
              监测内容：
              {taskContent(
                data?.security_event?.settings?.collect?.plugins,
                SECURITY_EVENT_TYPE_MAP,
                '所有事件类型'
              )}
            </span>
            {taskType !== 'schedule' && (
              <span className={s.flex1}>
                监测最大URL数: {maxPageFormat(data?.security_event?.settings?.collect?.maxPage)}
              </span>
            )}
          </div>
          <div className={cn(s.df, s.aic, s.mt12)}>
            <span className={s.flex1}>
               监测深度：{scanDepthFormat(data?.security_event?.settings?.collect?.depth)}
            </span>
            {taskType === 'schedule' ? <span className={s.flex1}>
              监测最大URL数: {maxPageFormat(data?.security_event?.settings?.collect?.maxPage)}
            </span> : <span className={s.flex1}></span>}
            <span className={s.flex1}></span>
            <span className={s.flex1}></span>
          </div>
        </div>
      </>
    )}
    {data?.content && (
      <>
        <div className={cn(s.p20_0)}>内容违规监测参数</div>
        <div className={cn(s.p16_24, s.border)}>
          <div className={cn(s.df, s.aifs)}>
            <span className={s.flex1}>
              任务类型：{taskTypeFormat(taskType)}
            </span>
            {taskType === 'schedule' && (
              <span className={s.flex1}>
                监测频率：{scanIntervalFormat(data?.content?.settings?.interval)}
              </span>
            )}
            <span className={cn(s.flex2)}>
              <span>
                监测内容：
                {data?.content?.settings?.collect?.plugins?.indexOf(
                  'keyword'
                ) > -1 && (
                    <>
                      敏感词({taskContent(
                        data?.content?.settings?.collect
                          ?.systemKeywordTypes,
                        CONTENT_KEYWORD_TYPES.reduce((t, i) => {
                          t[i.idx] = i.label;
                          return t;
                        }, {})
                      )})、
                    </>
                  )}
                {data?.content?.settings?.collect?.plugins?.indexOf(
                  'privacy_disclosure'
                ) > -1 && (
                    <>
                      隐私信息({taskContent(
                        data?.content?.settings?.collect
                          ?.privacyDisclosureTypes,
                        CONTENT_PRIVACY_DISCLOSURE_TYPES.reduce(
                          (t, i) => {
                            t[i.idx] = i.label;
                            return t;
                          },
                          {}
                        )
                      )})
                    </>
                  )}
              </span>
            </span>
            {taskType !== 'schedule' &&
              (data?.content?.settings?.collect?.includeUrl?.length >
                0 ? (
                <span className={s.flex1}>
                  监测URL：
                  {data?.content?.settings?.collect?.includeUrl?.join(
                    '、'
                  )}
                </span>
              ) : (
                <span className={s.flex1}>
                  监测深度：{scanDepthFormat(data?.content?.settings?.collect?.depth)}
                </span>
              ))}
          </div>
          <div className={cn(s.df, s.aic)}>
            {taskType === 'schedule' &&
              (data?.content?.settings?.collect?.includeUrl?.length >
                0 ? (
                <span className={s.flex1}>
                  监测URL：
                  {data?.content?.settings?.collect?.includeUrl?.join(
                    '、'
                  )}
                </span>
              ) : (
                <span className={s.flex1}>
                  监测深度：{scanDepthFormat(data?.content?.settings?.collect?.depth)}
                </span>
              ))}
            {data?.content?.settings?.collect?.includeUrl?.length >
              0 ? (
              <span className={s.flex1}></span>
            ) : (
              <span className={s.flex1}>
                监测最大URL数: {maxPageFormat(data?.content?.settings?.collect?.maxPage)}
              </span>
            )}
            <span className={s.flex1}></span>
            <span className={s.flex1}></span>
            {taskType !== 'schedule' && (
              <span className={s.flex1}></span>
            )}
          </div>
        </div>
      </>
    )}
		{data?.change_check && (
			<>
				<div className={cn(s.p20_0)}>篡改监测参数</div>
				<div className={cn(s.p16_24, s.border)}>
					<div className={cn(s.df, s.aic)}>
            <span className={s.flex1}>
              任务类型：{taskTypeFormat(taskType)}
            </span>
						{taskType === 'schedule' && (
							<span className={s.flex1}>
                监测频率：{scanIntervalFormat(data?.change_check?.settings?.interval)}
              </span>
						)}
						<span className={s.flex1}>
							监测方式：{data?.change_check?.settings?.collect?.type === 'part' ? '指定页面监测' : '全量监测'}
						</span>
					</div>
					<div className={cn(s.df, s.aic, s.mt12)}>
						<span className={s.flex1}>
              变更类型：{changeTypeFormat(data?.change_check?.settings?.collect?.changeType)}
            </span>
						<span className={s.flex1}>
              重点关注资源: {formatChangeCheckConfig(data?.change_check?.settings?.collect?.resources)}
            </span>
						<span className={s.flex1}>
              自定义敏感词: {formatChangeCheckConfig(data?.change_check?.settings?.collect?.keywords)}
            </span>
					</div>
					<div className={cn(s.df, s.aic, s.mt12)}>
						{data?.change_check?.settings?.collect?.enableBaseChange ? <span className={s.flex1}>
              自动更新样本频率: 每监测{data?.change_check?.settings?.collect?.baseChangeCount}次,进行一次更新
            </span> : <span className={s.flex1}>自动更新样本频率: 未开启</span>}
						{data?.change_check?.settings?.collect?.type === "full" && <span className={s.flex1}>
              监测深度: {scanDepthFormat(data?.change_check?.settings?.collect?.depth)}
            </span>}
						{data?.change_check?.settings?.collect?.type === "full" && < span className={s.flex1}>
							监测最大URL数: {maxPageFormat(data?.change_check?.settings?.collect?.maxPage)}
						</span>}
						{data?.change_check?.settings?.collect?.type === "part" && <span className={s.flex2}>
							指定页面: {formatChangeCheckConfig(data?.change_check?.settings?.collect?.includeUrl)}
						</span>}
					</div>
				</div>
			</>
		)}
    {is_support !== 0 && (
			<><div className={cn(s.p20_0)}>其他参数</div>
      <div className={cn(s.p16_24, s.border)}>
        <div className={cn(s.df, s.aic)}>
          {taskType === 'schedule' ? '监测时间段' : '执行方式'}：
          {taskType === 'schedule' ? data?.task_settings?.periodStartTime && data?.task_settings?.periodEndTime ?
            `${data?.task_settings?.periodStartTime?.substring(0, 5)}  ~  ${data?.task_settings?.periodEndTime?.substring(0, 5)}` : '- -'
            : data?.task_settings?.startAt ? moment(data?.task_settings?.startAt).format('YYYY-MM-DD HH:mm:ss') : '- -'}
        </div>
      </div>
    </>
	)}
    <div className={cn(s.p20_0)}>监测任务信息</div>
    <Table
      columns={webTaskCol}
      className={s.minHAuto}
      data={Object.keys(taskTypeMap).reduce((t, i) => {
        if (data[i]) {
          const used_time = data[i]?.time_info?.used_time.reduce(
            (t, i, k) => {
              if (i > 0) {
                t += i + timeList[k];
              }
              return t;
            },
            ''
          );
          t.push({
            task_type: taskTypeMap[i],
            start_time: moment(data[i].time_info?.start_time).format(
              'YYYY-MM-DD HH:mm:ss'
            ),
            end_time: moment(data[i].time_info?.end_time).format(
              'YYYY-MM-DD HH:mm:ss'
            ),
            used_time,
            task_session_id: data[i].task_session_id,
          });
        }
        return t;
      }, [])}
      pro
    />
  </>)

  const Info = () => (<>
    {data?.vul && (
      <>
        <div className={cn(s.p20_0)}>Web漏洞监测参数</div>
        <div className={cn(s.p16_24, s.border)}>
          <div className={cn(s.df, s.aic)}>
            <span className={s.flex1}>
              任务类型：{taskTypeFormat(taskType)}
            </span>
            {/* 仅周期增量有网站画像配置，网站画像开启时监测频率无效 */}
            {taskType === 'schedule'
              && ((data?.vul?.settings?.collect?.type === 'increment' && !data?.vul?.settings?.enableSitePortraitTriggerMonitor) ? (
                <span className={s.flex1}>
                  监测频率：{scanIntervalFormat(data?.vul?.settings?.interval)}
                </span>) :
                (<span className={s.flex1}>
                  网站画像监测引擎：{data?.vul?.settings ? '已启用' : '- -'}
                </span>
                ))}
            <span className={s.flex1}>
              监测内容：
              {(function () {
                const vul = data?.vul?.settings?.collect?.vul || [];
                if (vul.length === 0) {
                  return '- -';
                }
                if (taskType === 'schedule') {
                  return taskContent(vul, vulnsTemp, '所有漏洞类型', 'vul');
                } else {
                  if (vulnsTemp[vul[0]]) {
                    return taskContent(
                      vul,
                      vulnsTemp,
                      '所有漏洞类型',
                      'vul'
                    );
                  } else {
                    return taskContent(vul, vulnsMap, '所有漏洞插件');
                  }
                }
              })()}
            </span>
            <span className={s.flex1}>
              监测模式：
              {data?.vul?.settings ? (data?.vul?.settings?.collect?.speed === 'high'
                ? '仅高危'
                : '高、中、低危') : '- -'}
            </span>
            {taskType !== 'schedule' &&
              data?.vul?.settings?.collect?.type !== 'increment' && (
                <span className={s.flex1}>
                  监测深度：{scanDepthFormat(data?.vul?.settings?.collect?.depth)}
                </span>
              )}
          </div>
          {data?.vul?.settings?.collect?.type !== 'increment' && (
            <div className={cn(s.df, s.aic, s.mt12)}>
              {taskType === 'schedule' && (
                <span className={s.flex1}>
                  监测深度：{scanDepthFormat(data?.vul?.settings?.collect?.depth)}
                </span>
              )}
              <span className={s.flex1}>
                监测最大URL数: {maxPageFormat(data?.vul?.settings?.collect?.maxPage)}
              </span>
              <span className={s.flex1}></span>
              {taskType === 'schedule' ? (
                <span className={s.flex1}></span>
              ) : (
                <>
                  <span className={s.flex1}></span>
                  <span className={s.flex1}></span>
                </>
              )}
            </div>
          )}
        </div>
      </>
    )}
    {data?.ssl && (
      <>
        <div className={cn(s.p20_0)}>SSL安全监测参数</div>
        <div className={cn(s.p16_24, s.border)}>
          <div className={cn(s.df, s.aic)}>
            <span className={s.flex1}>
              任务类型：{taskTypeFormat(taskType)}
            </span>
            <span className={s.flex1}>
              监测内容：
              {data?.ssl?.settings?.collect?.pluginCategories
                ?.map(item => {
                  return SSL_CATEGORY_KEY_LABEL_MAP[item];
                })
                .join(', ') || '- -'}
            </span>
            {taskType === 'schedule' ? (
              <span className={s.flex1}>
                监测频率：{scanIntervalFormat(data?.ssl?.settings?.interval)}
              </span>
            ) : (
              <span className={s.flex1}></span>
            )}
            <span className={s.flex1}></span>
          </div>
        </div>
      </>
    )}
    {data?.security_event && (
      <>
        <div className={cn(s.p20_0)}>安全事件监测参数</div>
        <div className={cn(s.p16_24, s.border)}>
          <div className={cn(s.df, s.aic)}>
            <span className={s.flex1}>
              任务类型：{taskTypeFormat(taskType)}
            </span>
            {taskType === 'schedule' && (
              <span className={s.flex1}>
                监测频率:{scanIntervalFormat(data?.security_event?.settings?.interval)}
              </span>
            )}
            <span className={s.flex2}>
              监测内容：
              {data?.security_event?.settings?.collect?.plugins ? taskContent(
                data?.security_event?.settings?.collect?.plugins,
                SECURITY_EVENT_TYPE_MAP,
                '所有事件类型'
              ) : '- -'}
            </span>
            {taskType !== 'schedule' && (
              <span className={s.flex1}>
                监测最大URL数: {maxPageFormat(data?.security_event?.settings?.collect?.maxPage)}
              </span>
            )}
          </div>
          <div className={cn(s.df, s.aic, s.mt12)}>
            <span className={s.flex1}>
              监测深度：{scanDepthFormat(data?.security_event?.settings?.collect?.depth)}
            </span>
            {taskType === 'schedule' ? <span className={s.flex1}>
              监测最大URL数: {maxPageFormat(data?.security_event?.settings?.collect?.maxPage)}
            </span> : <span className={s.flex1}></span>}
            <span className={s.flex1}></span>
            <span className={s.flex1}></span>
          </div>
        </div>
      </>
    )}
    {data?.content && (
      <>
        <div className={cn(s.p20_0)}>内容违规监测参数</div>
        <div className={cn(s.p16_24, s.border)}>
          <div className={cn(s.df, s.aifs)}>
            <span className={s.flex1}>
              任务类型：{taskTypeFormat(taskType)}
            </span>
            {taskType === 'schedule' && (
              <span className={s.flex1}>
                监测频率:{scanIntervalFormat(data?.content?.settings?.interval)}
              </span>
            )}
            <span className={cn(s.flex2)}>
              <span>
                监测内容：{data?.content?.settings ? <>
                  {data?.content?.settings?.collect?.plugins?.indexOf(
                    'keyword'
                  ) > -1 && (
                      <>
                        敏感词({taskContent(
                          data?.content?.settings?.collect
                            ?.systemKeywordTypes,
                          CONTENT_KEYWORD_TYPES.reduce((t, i) => {
                            t[i.idx] = i.label;
                            return t;
                          }, {})
                        )})、
                      </>
                    )}
                  {data?.content?.settings?.collect?.plugins?.indexOf(
                    'privacy_disclosure'
                  ) > -1 && (
                      <>
                        隐私信息({taskContent(
                          data?.content?.settings?.collect
                            ?.privacyDisclosureTypes,
                          CONTENT_PRIVACY_DISCLOSURE_TYPES.reduce(
                            (t, i) => {
                              t[i.idx] = i.label;
                              return t;
                            },
                            {}
                          )
                        )})
                      </>
                    )}
                </> : '- -'}
              </span>
            </span>
            {taskType !== 'schedule' &&
              (data?.content?.settings?.collect?.includeUrl?.length >
                0 ? (
                <span className={s.flex1}>
                  监测URL：
                  {data?.content?.settings?.collect?.includeUrl?.join(
                    '、'
                  )}
                </span>
              ) : (
                <span className={s.flex1}>
                  监测深度：{scanDepthFormat(data?.content?.settings?.collect?.depth)}
                </span>
              ))}
          </div>
          <div className={cn(s.df, s.aic)}>
            {taskType === 'schedule' &&
              (data?.content?.settings?.collect?.includeUrl?.length >
                0 ? (
                <span className={s.flex1}>
                  监测URL：
                  {data?.content?.settings?.collect?.includeUrl?.join(
                    '、'
                  )}
                </span>
              ) : (
                <span className={s.flex1}>
                  监测深度：{scanDepthFormat(data?.content?.settings?.collect?.depth)}
                </span>
              ))}
            {data?.content?.settings?.collect?.includeUrl?.length >
              0 ? (
              <span className={s.flex1}></span>
            ) : (
              <span className={s.flex1}>
                监测最大URL数: {maxPageFormat(data?.content?.settings?.collect?.maxPage)}
              </span>
            )}
            <span className={s.flex1}></span>
            <span className={s.flex1}></span>
            {taskType !== 'schedule' && (
              <span className={s.flex1}></span>
            )}
          </div>
        </div>
      </>
    )}
    {data?.change_check && (
      <>
        <div className={cn(s.p20_0)}>篡改监测参数</div>
        <div className={cn(s.p16_24, s.border)}>
					<div className={cn(s.df, s.aic)}>
            <span className={s.flex1}>
              任务类型：{taskTypeFormat(taskType)}
            </span>
						{taskType === 'schedule' && (
							<span className={s.flex1}>
                监测频率：{scanIntervalFormat(data?.change_check?.settings?.interval)}
              </span>
						)}
						<span className={s.flex1}>
							监测方式：{data?.change_check?.settings?.collect?.type === 'part' ? '指定页面监测' : '全量监测'}
						</span>
					</div>
					<div className={cn(s.df, s.aic, s.mt12)}>
						<span className={s.flex1}>
              变更类型：{changeTypeFormat(data?.change_check?.settings?.collect?.changeType)}
            </span>
						<span className={s.flex1}>
              重点关注资源: {formatChangeCheckConfig(data?.change_check?.settings?.collect?.resources)}
            </span>
						<span className={s.flex1}>
              自定义敏感词: {formatChangeCheckConfig(data?.change_check?.settings?.collect?.keywords)}
            </span>
					</div>
					<div className={cn(s.df, s.aic, s.mt12)}>
						{data?.change_check?.settings?.collect?.enableBaseChange ? <span className={s.flex1}>
              自动更新样本频率: 每监测{data?.change_check?.settings?.collect?.baseChangeCount}次,进行一次更新
            </span> : <span className={s.flex1}>自动更新样本频率: 未开启</span>}
						{data?.change_check?.settings?.collect?.type === "full" && <span className={s.flex1}>
              监测深度: {scanDepthFormat(data?.change_check?.settings?.collect?.depth)}
            </span>}
						{data?.change_check?.settings?.collect?.type === "full" && < span className={s.flex1}>
							监测最大URL数: {maxPageFormat(data?.change_check?.settings?.collect?.maxPage)}
						</span>}
						{data?.change_check?.settings?.collect?.type === "part" && <span className={s.flex2}>
							指定页面: {formatChangeCheckConfig(data?.change_check?.settings?.collect?.includeUrl)}
						</span>}
					</div>
				</div>
			</>
		)}
		{is_support !== 0 && (
			<>
			<div className={cn(s.p20_0)}>其他参数</div>
			<div className={cn(s.p16_24, s.border)}>
				<div className={cn(s.df, s.aic)}>
          {taskType === 'schedule' ? '监测时间段' : '执行方式'}：
          {taskType === 'schedule' ? data?.overview?.ws_task_time?.periodStartTime && data?.overview?.ws_task_time?.periodEndTime ?
            `${data?.overview?.ws_task_time?.periodStartTime?.substring(0, 5)}  ~  ${data?.overview?.ws_task_time?.periodEndTime?.substring(0, 5)}` : '- -'
            : data?.overview?.ws_task_time?.startAt ? `定时执行（${moment(data?.overview?.ws_task_time?.startAt).format('YYYY-MM-DD HH:mm:ss')}）` : '立即执行'}
        </div>
      </div>
    </>
		)}
    <MonitorTaskList />
  </>)

	useEffect(() => {
		getVulnsList();
		getVulnsTemp()
	}, []);

	return (
		<>
			{isHistory ? (
				<Tabs className={s.tabs}>
					{data?.vul && (
						<TabPane key="vul" tab="Web漏洞监测">
							<VulTable
								isHistory={isHistory}
								webDataLoading={webDataLoading}
								jid={jid}
								taskType={taskType}
								data={data?.vul || {}}
								tid={data?.vul?.task_id}
								atid={atid}
								refresh={refresh}
							/>
						</TabPane>
					)}
					{data?.ssl && (
						<TabPane key="ssl" tab="SSL安全监测">
							<SSLTable
								isHistory={isHistory}
								webDataLoading={webDataLoading}
								taskType={taskType}
								jid={jid}
								data={data?.ssl || {}}
								tid={data?.ssl?.task_id}
								targetUrl={data?.overview?.target_url}
								atid={atid}
								refresh={refresh}
							/>
						</TabPane>
					)}
					{data?.security_event && (
						<TabPane key="security_event" tab="安全事件监测">
							<SecurityTable
								isHistory={isHistory}
								webDataLoading={webDataLoading}
								jid={jid}
								taskType={taskType}
								data={data?.security_event || {}}
								tid={data?.security_event?.task_id}
								atid={atid}
								refresh={refresh}
							/>
						</TabPane>
					)}
					{data?.content && (
						<TabPane key="content" tab="内容违规监测">
							<ContentTable
								isHistory={isHistory}
								webDataLoading={webDataLoading}
								jid={jid}
								taskType={taskType}
								data={data?.content || {}}
								tid={data?.content?.task_id}
								atid={atid}
								refresh={refresh}
							/>
						</TabPane>
					)}
					{data?.change_check && (
						<TabPane key="change_check" tab="篡改监测">
							<ChangeCheckTable
								isHistory={isHistory}
								webDataLoading={webDataLoading}
								enableTaskType={data?.overview?.enable_task_type || []}
								taskType={taskType}
								jid={jid}
								data={data?.change_check || {}}
								tid={data?.change_check?.task_id}
								atid={atid}
								refresh={refresh}
							/>
						</TabPane>
					)}
					<TabPane key="info-history" tab="附录">
             <HistoryInfo/>
					</TabPane>
				</Tabs>
			) : (
				<Tabs
					activeKey={tag}
					className={s.tabs}
					onChange={tag => {
						history.push(
							`/job-manage/web-task/detail?jid=${jid}&id=${atid}&type=${type}&tag=${tag}`
						);
					}}
				>
					<TabPane key="vul" tab="Web漏洞监测">
						<VulTable
							isHistory={isHistory}
							webDataLoading={webDataLoading}
							enableTaskType={data?.overview?.enable_task_type || []}
							taskType={taskType}
							jid={jid}
							data={data?.vul || {}}
							tid={data?.vul?.task_id}
							atid={atid}
							refresh={refresh}
						/>
					</TabPane>
					<TabPane key="ssl" tab="SSL安全监测">
						<SSLTable
							isHistory={isHistory}
							webDataLoading={webDataLoading}
							enableTaskType={data?.overview?.enable_task_type || []}
							taskType={taskType}
							jid={jid}
							data={data?.ssl || {}}
							tid={data?.ssl?.task_id}
							targetUrl={data?.overview?.target_url}
							atid={atid}
							refresh={refresh}
						/>
					</TabPane>
					<TabPane key="security_event" tab="安全事件监测">
						<SecurityTable
							isHistory={isHistory}
							webDataLoading={webDataLoading}
							enableTaskType={data?.overview?.enable_task_type || []}
							taskType={taskType}
							jid={jid}
							data={data?.security_event || {}}
							tid={data?.security_event?.task_id}
							atid={atid}
							refresh={refresh}
						/>
					</TabPane>
					<TabPane key="content" tab="内容违规监测">
						<ContentTable
							isHistory={isHistory}
							webDataLoading={webDataLoading}
							enableTaskType={data?.overview?.enable_task_type || []}
							taskType={taskType}
							jid={jid}
							data={data?.content || {}}
							tid={data?.content?.task_id}
							atid={atid}
							refresh={refresh}
						/>
					</TabPane>
          <TabPane key="change_check" tab="篡改监测">
            <ChangeCheckTable
              	isHistory={isHistory}
                webDataLoading={webDataLoading}
                enableTaskType={data?.overview?.enable_task_type || []}
                taskType={taskType}
                jid={jid}
                data={data?.change_check || {}}
                tid={data?.change_check?.task_id}
                atid={atid}
                refresh={refresh}
            />
					</TabPane>
					<TabPane key="info" tab="附录">
            <Info/>
					</TabPane>
				</Tabs>
			)}
		</>
	);
}
Detail.propTypes = {
	tid: PropTypes.string.isRequired,
	atid: PropTypes.string.isRequired,
	match: PropTypes.shape({
		params: PropTypes.shape({
			assetType: PropTypes.string.isRequired,
		}).isRequired,
	}).isRequired,
};
export default withRouter(Detail);
